<!DOCTYPE html>

<ui:composition template="../template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    
    <script type="text/javascript">
        $('#myTab a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        });
    </script>
    
    
    <ui:define name="content">
        <div class="col-md-6">
            <h4>Usuarios y Asignaci&#243;n de Permisos</h4>
            <h:form>
                <div class="panel panel-default">
                    <div class="panel-body">
                      
                        <ul id="myTab" class="nav nav-tabs" style="padding-top: 10px;">
                            <li class="active"><a href="#usuarios" data-toggle="tab">Usuarios</a></li>
                            <li><a href="#permisos" data-toggle="tab">Permisos</a></li>
                        </ul>
                        
                        <div id="myTabContent" class="tab-content" >
                            <div class="tab-pane fade in active" id="usuarios">                                
                                <br/>
                                <ui:include src="mantUsuarios.xhtml"/>
                            </div>
                            <div class="tab-pane fade" id="permisos">
                                <br/>
                               <ui:include src="mantPermisos.xhtml"/>
                            </div>
                        </div>
                    
                    </div>
                </div>
            </h:form>
        </div>
    </ui:define>
</ui:composition>
